<template>
<div class="time-item">
    <div class="time-item-head">
        <h5>{{data.title.value}}</h5>
        <span>{{(data.score.value * 100).toFixed(1)}}%</span>
    </div>
    <div class="time-item-desc">
        <p>{{data.description.value}}</p>
    </div>
</div>
</template>

<script>
import {
    toRefs
} from "vue"
export default {
    name: "timeItem",
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    setup(props) {
        const data = toRefs(props.data);
        return {
            data
        }
    }
}
</script>

<style lang="scss" scoped>
.time-item {
    width: 100%;
    height: 100%;

    .time-item-head {
        display: flex;
        line-height: 45px;

        h5 {
            flex: 1;
            color: #333;
            font-size: 16px;
            font-weight: 600;
        }

        span {
            font-size: 13px;
            color: #888;
        }
    }

    .time-item-desc {
        font-size: 15px;
        line-height: 20px;
        color: #686868;

        p {
            word-break: break-all;
            text-overflow: ellipsis;
        }
    }
}
</style>
